<template>
  <div class="foodlist" v-if="index===0">
      <van-tree-select 
       height="88vw" 
      :items="items" 
      :main-active-index="activeIndex"
      @click-nav="navClick">
        <template #content>
            <div v-for="item in subItem" :key="item.id">
                <food-add :item="item"  :addClick="addClick" :NumChange="onChange"></food-add>
            </div>
        </template>
        </van-tree-select>
  </div>
  <div v-else>{{foodData.content}}</div>
</template>

<script>
import FoodAdd from '../common/FoodAdd.vue'
import { reactive, toRefs} from '@vue/reactivity'
export default {
  name:'FoodList',
  components:{
      FoodAdd
  },
  props:['index','foodData'],
  setup(props){
       let data = reactive({
         activeIndex:0,
         items:[],
         subItem:[]
       })
      
    //   数据初始化
      function alterdata(){
        let newList = []
        props.foodData?.items?.map((i,index)=>{
            newList.push({
                text:i.text
            })
            if(data.activeIndex==index){
                 data.subItem = i.children;
            }
        })
        data.items = newList
      }
      alterdata()
    //   左侧导航触发事件
    function navClick(i){
         data.activeIndex = i;
         alterdata();
    }
    
    // 切换步进器
    function addClick(i){
          data.subItem.forEach(item=>{
              if(item.id==i){
                  item.add = false
                  item.num+=1
              }
          })
    }
    // 步进器触发事件
    function onChange(v,d){
        data.subItem.forEach(item=>{
            if(item.id===d.name){
                item.num = v;
            }
        })
    }


       return {
        ...toRefs(data),
        navClick,
        addClick,
        onChange
       }
  }
}
</script>

<style lang="less" scoped>
.foodlist{
  margin-top: 20px; 
}
/deep/ .van-sidebar-item--select::before{
 background-color: #ffc400;
}
</style>